<!--
  * 采购订单
  *
  * @Author:    AKITA
  * @Date:      2025-07-23 20:52:44
  * @Copyright  AKITA
-->
<template>


  <a-card size="small"
    :bordered="false">










    <!---------- 查询表单form begin ----------->
    <a-form class="smart-query-form">
      <a-row class="smart-query-form-row">
        <a-form-item label="电键"
          class="smart-query-form-item">
          <a-input style="width: 200px"
            v-model:value="queryForm.id"
            placeholder="电键" />
        </a-form-item>
        <a-form-item label="创建日期从"
          class="smart-query-form-item">
          <a-date-picker show-time
            valueFormat="YYYY-MM-DD HH:mm:ss"
            v-model:value="queryForm.createTimeFr" />
        </a-form-item>

        <a-form-item label="创建日期到"
          class="smart-query-form-item">
          <a-date-picker show-time
            valueFormat="YYYY-MM-DD HH:mm:ss"
            v-model:value="queryForm.createTimeTo" />
        </a-form-item>

        <a-form-item class="smart-query-form-item">
          <a-button type="primary"
            @click="onSearch">
            <template #icon>
              <SearchOutlined />
            </template>
            查询
          </a-button>
          <a-button @click="resetQuery"
            class="smart-margin-left10">
            <template #icon>
              <ReloadOutlined />
            </template>
            重置
          </a-button>
        </a-form-item>
      </a-row>
    </a-form>
    <!---------- 查询表单form end ----------->







    <!---------- 表格操作行 begin ----------->
    <a-row class="smart-table-btn-block">
      <a-button-group>
        <a-button @click="newForm"
          type="primary">
          <template #icon>
            <PlusOutlined />
          </template>
          新建
        </a-button>
      </a-button-group>
      <div class="smart-table-setting-block">
        <TableOperator v-model="columns"
          :tableId="null"
          :refresh="queryData" />
      </div>
    </a-row>
    <!---------- 表格操作行 end ----------->

    <!---------- 表格 begin ----------->
    <a-table size="small"
      :scroll="{ x: 600, y: 600 }"
      @resizeColumn="handleResizeColumn"
      style="width: 100%"
      :dataSource="tableData"
      :columns="columns"
      :rowKey="index => { return index }"
      :loading="tableLoading"
      :pagination="false">
      <template #bodyCell="{ text, record, column }">
        <template v-if="column.dataIndex === 'id'">
          <a-button size="small"
            type="link"
            @click="showForm(record)">{{ text }}</a-button>
        </template>
        <template v-if="column.dataIndex === 'approved'">
          {{ ApprovedFormat(text) }}
        </template>

        <template v-if="column.dataIndex === 'qty'">

          <span>{{ excute(text) }}</span>
        </template>
      </template>
    </a-table>
    <!---------- 表格 end ----------->

    <div class="smart-query-table-page">
      <a-pagination showSizeChanger
        showQuickJumper
        show-less-items
        :pageSizeOptions="PAGE_SIZE_OPTIONS"
        :defaultPageSize="queryForm.pageSize"
        v-model:current="queryForm.pageNum"
        v-model:pageSize="queryForm.pageSize"
        :total="total"
        @change="queryData"
        @showSizeChange="queryData"
        :show-total="(total) => `共${total}条`" />
    </div>
  </a-card>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { SmartLoading } from '/src/components/framework/smart-loading';
import { saordApi, saordaApi } from '/src/api/business/erp/saord-api';
import { PAGE_SIZE_OPTIONS } from '/src/constants/common-const';
import { smartSentry } from '/src/lib/smart-sentry';
import TableOperator from '/src/components/support/table-operator/index.vue';
import { useRouter } from 'vue-router';
import { ApprovedFormat } from '/src/utils/numformat-util.js';
import { columns } from '/src/views/business/erp/sao/data/saord-data.js';
import { excute } from '/src/utils/numformat-util.js';

const router = useRouter();
// ---------------------------- 表格列 ----------------------------



// ---------------------------- 查询数据表单和方法 ----------------------------

const queryFormState = {
  id: undefined, //电键
  pageNum: 1,
  pageSize: 20,
};
// 查询表单form
const queryForm = reactive({ ...queryFormState });
// 表格加载loading
const tableLoading = ref(false);
// 表格数据
const tableData = ref([]);
// 总数
const total = ref(0);

// 重置查询条件
function resetQuery() {
  let pageSize = queryForm.pageSize;
  Object.assign(queryForm, queryFormState);
  queryForm.pageSize = pageSize;
  queryData();
}

// 搜索
function onSearch() {
  queryForm.pageNum = 1;
  queryData();
}

// 查询数据
function queryData() {
  tableLoading.value = true;
  saordApi
    .queryPage(queryForm)
    .then((res) => {
      tableData.value = res.data.list;
      total.value = res.data.total;
    })
    .catch((err) => {
      smartSentry.captureError(err);
    })
    .finally(() => {
      tableLoading.value = false;
    });
}

onMounted(queryData);

function showForm(data) {
  router.push({ path: 'saorda', query: { type: 'info', id: data.id } });
}

function handleResizeColumn(w, col) {
  columns.value.forEach((item) => {
    if (item.dataIndex === col.dataIndex) {
      item.width = Math.floor(w);
      // 拖动宽度标识
      item.dragAndDropFlag = true;
    }
  });
}

function newForm(data) {
  router.push({ path: 'saorda', query: { type: 'new', id: data.id } });
}
</script>
